<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col col-md-6">
                <h5 class="card-title">
                    {{ '::Menu:Books' | abpLocalization }}
                </h5>
            </div>
            <div class="text-end col col-md-6">
                <div class="text-lg-end pt-2">
                    <button *abpPermission="'BookStore.Books.Create'" id="create" class="btn btn-primary" type="button"
                        (click)="createBook()">
                        <i class="fa fa-plus me-1"></i>
                        <span>{{ '::NewBook' | abpLocalization }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
            <ngx-datatable-column [name]="'::Actions' | abpLocalization" [maxWidth]="150" [sortable]="false">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <div ngbDropdown container="body" class="d-inline-block">
                        <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" ngbDropdownToggle>
                            <i class="fa fa-cog me-1"></i>{{ '::Actions' | abpLocalization }}
                        </button>
                        <div ngbDropdownMenu>
                            <button *abpPermission="'BookStore.Books.Edit'" ngbDropdownItem (click)="editBook(row.id)">
                                {{ '::Edit' | abpLocalization }}
                            </button>
                            <button *abpPermission="'BookStore.Books.Delete'" ngbDropdownItem (click)="delete(row.id)">
                                {{ '::Delete' | abpLocalization }}
                            </button>
                        </div>
                    </div>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
            <ngx-datatable-column [name]="'::Author' | abpLocalization" prop="authorName"
                [sortable]="false"></ngx-datatable-column>

            <ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ '::Enum:BookType.' + row.type | abpLocalization }}1
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::PublishDate' | abpLocalization" prop="publishDate">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ row.publishDate | date }}
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::Price' | abpLocalization" prop="price">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    {{ row.price | currency }}
                </ng-template>
            </ngx-datatable-column>
        </ngx-datatable>
    </div>
</div>

<abp-modal [(visible)]="isModalOpen">
    <ng-template #abpHeader>
        <h3>{{ (selectedBook.id ? '::Edit' : '::NewBook' ) | abpLocalization }}</h3>
    </ng-template>

    <ng-template #abpBody>
        <form [formGroup]="form" (ngSubmit)="save()">
            <div class="form-group">
                <label for="author-id">Author</label><span> * </span>
                <select class="form-control" id="author-id" formControlName="authorId">
                    <option [ngValue]="null">Select author</option>
                    <option [ngValue]="author.id" *ngFor="let author of authors$ | async">
                        {{ author.name }}
                    </option>
                </select>
            </div>

            <div class="mt-2">
                <label for="book-name">Name</label><span> * </span>
                <input type="text" id="book-name" class="form-control" formControlName="name" autofocus />
            </div>

            <div class="mt-2">
                <label for="book-price">Price</label><span> * </span>
                <input type="number" id="book-price" class="form-control" formControlName="price" />
            </div>

            <div class="mt-2">
                <label for="book-type">Type</label><span> * </span>
                <select class="form-control" id="book-type" formControlName="type">
                    <option [ngValue]="null">Select a book type</option>
                    <option [ngValue]="type.value" *ngFor="let type of bookTypes"> 
                        {{ '::Enum:BookType.' + type.value | abpLocalization }}
                    </option>
                </select>
            </div>

            <div class="mt-2">
                <label>Publish date</label><span> * </span>
                <input #datepicker="ngbDatepicker" class="form-control" name="datepicker" formControlName="publishDate"
                    ngbDatepicker (click)="datepicker.toggle()" />
            </div>
        </form>
    </ng-template>

    <ng-template #abpFooter>
        <button type="button" class="btn btn-secondary" abpClose>
            {{ '::Close' | abpLocalization }}
        </button>

        <!--added save button-->
        <button class="btn btn-primary" (click)="save()" [disabled]="form.invalid">
            <i class="fa fa-check mr-1"></i>
            {{ '::Save' | abpLocalization }}
        </button>
    </ng-template>

</abp-modal>